
<template>
	<scroll-view scroll-y="true" class="wrap">
		<view class="wrap__list">
			<view class="list__item" v-for="(item, index) in recordsList" :key="index">
				<view class="item__header">
					<text class="header__title">{{$t('exchange.success')}}</text>
					<text class="header__time">{{item.time}}</text>
				</view>
				<view class="item__info">
					<view class="info__title">{{$t('exchange.from')}}：{{item.from | formatCoin}}</view>
					<view class="info__title">{{$t('exchange.to')}}：{{item.to | formatCoin}}</view>
					<view class="info__title">{{$t('amount.amount')}}：{{item.amount}}</view>
					<view class="info__detail">{{$t('exchange.rate')}}：{{item.exchange_rate}}</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>
<script>
	export default{
		data(){
			return {
				recordsList:[]
			}
		},
		filters:{
			formatCoin(num){
				let temp = {
					 1:"JPY",
					2:"USD",
					3:"GBP"
				}
				return temp[num]
			}
		},
		onLoad() {
			this.getExchangeHistory()
		},
		methods:{
			async getExchangeHistory(){
				let res = await this.$api.getExchangeRecords()
				if(res.code === 1 && res.data){
					this.recordsList = res.data
				}
			}
		}
	}
	
</script>
<style lang="scss">
	.wrap{
		&__list{
			padding: 0 30rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			.list__item{
				width: 690rpx;
				height: 257rpx;
				/* background: #1D1F2E; */
				border-radius: 10rpx;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				margin-bottom: 30rpx;
				.item__header{
					@include flexRowAlign(space-between);
					.header__title{
						font-size: 32rpx;
						color: #fff;
					}
					.header__time{
						font-size: 26rpx;
						color: #fff;
					}
				}
				.item__info{
					margin-top: 20rpx;
					border-bottom: 1rpx solid #343643;
					padding-top: 20rpx;
					.info__title{
						font-size: 28rpx;
						color: #fff;
						margin-bottom: 8rpx;
					}
					.info__detail{
						font-size: 26rpx;
						color: #fff;
					}
				}
			}
		}
	}
</style>